<!--商家管理-商家列表-->
<template>
  <div class="video-list-manage-parent" ref="parentContainer">
    <!--操作表单区域-->
    <div class="option-parent" ref="optionParentContainer">
      <el-row :gutter="0">
        <el-col :span="4">
          <el-select v-model="areaid" placeholder="类型" style="width: 100%">
            <el-option
              v-for="item in categoryData"
              :key="item.areaid"
              :label="item.areaname"
              :value="item.areaid">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input v-model="sellerid" placeholder="请输入商户Id"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="queryArticleByBtn()">查询</el-button>
        </el-col>
        <el-col :span="4">
        </el-col>
        <el-col :span="4">
        </el-col>
      </el-row>
    </div>

    <!--数据表格区域-->
    <div v-bind:style="{height:tableHeight+'px',width:'100%'}" v-loading="loading">
      <el-table :data="articleData.agent_seller_bonus_list" border width="100%" height="100%">
        <el-table-column
          fixed
          label="状态"
          min-width="70">
          <template slot-scope="scope">
            <p>{{genBonusState(scope.row.bonus_state)}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="bonusowner"
          label="商户Id"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="sellername"
          label="商户名称"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="bonus_title1"
          label="红包名称"
          min-width="60">
        </el-table-column>
        <el-table-column
          prop="bonus_title2"
          label="红包描述"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="bonus_money"
          label="单个金额"
          min-width="60">
        </el-table-column>
        <el-table-column
          prop="bonus_used"
          label="已发放金额"
          min-width="80">
        </el-table-column>
        <el-table-column
          prop="bonus_out"
          label="已使用金额"
          min-width="80">
        </el-table-column>
        <!--<el-table-column label="操作">-->
        <!--<template slot-scope="scope">-->
        <!--<el-button-->
        <!--size="mini"-->
        <!--@click="handleEdit(scope.row)">编辑-->
        <!--</el-button>-->
        <!--<el-button-->
        <!--size="mini"-->
        <!--type="danger"-->
        <!--@click="handleDelete(scope.row)">删除-->
        <!--</el-button>-->
        <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
    </div>

    <!--翻页区域-->
    <div class="pagination-parent" ref="paginationParentContainer">
      <el-pagination
        class="pagination-body"
        @current-change="handleCurrentChange"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="articleData.rowcount">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import CPageBase from "../fragment/CPageBase"
  import CRootBase from "../fragment/CRootBase"

  export default {
    data() {
      return {
        pathArr: [
          {path: "/", name: "首页"},
          {path: "/container/seller_list", name: "商户红包"},
        ],
        start: 1,
        limit: 15,
        loading: false,

        categoryData: [{areaid: "1", areaname: "全部"}, {areaid: "0", areaname: "进行中"}],
        areaid: "1",//类型id
        sellerid: "",//商户id
        articleData: ""
      }
    },
    watch: {
      "areaid": function () {
        this.queryArticleByBtn();
      }
    },
    mixins: [CPageBase, CRootBase],
    components: {},
    mounted() {

    },
    activated() {
      this.initCurrentPath();
      this.requestArticleData();
    },
    methods: {
      //初始化面包屑路径
      initCurrentPath() {
        this.$store.commit('changeCurrentLocation', this.pathArr);
      },

      //截取时间
      genTime(time) {
        return time.substring(0, time.length - 2);
      },

      //状态转换
      genBonusState(bonus_state) {
        if (bonus_state === "0") {
          return "进行中"
        } else if (parseInt(bonus_state) > 1||parseInt(bonus_state) ===1) {
          return "已停止"
        }
      },

      //打开新增页面
      openPage() {
        this.$router.push("seller_add");
      },

      //打开编辑页
      handleEdit(item) {
        this.$router.push({path: 'seller_add', query: item});
      },

      //处理页面改变事件
      handleCurrentChange(currentPage) {
        this.start = currentPage;
        this.requestArticleData();
      },

      //点击查询按钮
      queryArticleByBtn() {
        this.start = 1;
        this.limit = 15;
        this.requestArticleData();
      },

      //获取商家列表
      requestArticleData() {
        let parameter = new URLSearchParams();
        parameter.append("action", "agent_seller_bonus_list");
        parameter.append("list_type", this.areaid);
        parameter.append("sellerid", this.sellerid);
        parameter.append("pageno", this.start);
        parameter.append("pagesize", this.limit);
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.articleData = data;
        });
      },

      //删除提示框
      handleDelete(item) {
        let that = this;
        this.$confirm('确认要删除该条记录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.confireDelete(item);
        }).catch(() => {
        });
      },

      //确认删除
      confireDelete(item) {
        let that = this;
        let parameter = new URLSearchParams();
        parameter.append("action", "agent_area_modify");
        parameter.append("areaid", id);
        parameter.append("areaname", name);
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.$message({type: 'success', message: '删除成功!'});
          that.requestArticleData();
        });
      },
    }
  }
</script>

<style lang="scss" scoped="" type="text/scss" src="../../assets/style/list-type-pages.scss">

</style>

